<template>
  <view :style="themeColor">
    <view class="page">
      <view class="flex benben-position-layout flex flex-wrap align-center questionAnswer_flex_0"
        :style="{height:(88+StatusBarRpx)+'rpx',paddingTop:StatusBarRpx+'rpx', }">
        <view class='flex flex-wrap align-center justify-between flex-sub questionAnswer_fd0_0'>
          <view class='flex flex-wrap align-center questionAnswer_fd0_0_c0' @tap.stop="handleJumpDiy" data-type="back"
            data-url="1">
            <text class='fu-iconfont2  questionAnswer_fd0_0_c0_c0'>&#xE794;</text>
          </view>
          <view class='flex flex-wrap align-stretch justify-center'>
            <text class='questionAnswer_fd0_0_c1_c0'>快问快答</text>
          </view>
          <view class='flex flex-wrap align-center justify-end questionAnswer_fd0_0_c0'>
          </view>
        </view>

      </view>
      <view :style="{height: (88+StatusBarRpx)+'rpx'}"></view>
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout questionAnswer_flex_1">
        <view class='flex flex-wrap align-center justify-center'>
          <text class='questionAnswer_fd1_0_c0'>乐于助人任务已完成</text>
          <text class='questionAnswer_fd1_0_c1'>{{overIndec}}</text>
          <text class='questionAnswer_fd1_0_c0'>/{{pagesize}}</text>
        </view>
        <view class='flex flex-wrap align-center justify-center questionAnswer_fd1_1'>
          <view class='flex benben-progress-bar questionAnswer_fd1_1_c0'>
            <view class='benben-progress-bar-center questionAnswer_progress1_fd1_1_c0' :style="{width:precenum+'%'}">
            </view>

          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <!---flex布局flex布局开始-->
      <view class="flex flex-direction flex-wrap align-stretch benben-flex-layout questionAnswer_flex_2">
        <!-- <view class='flex flex-wrap align-center justify-end questionAnswer_fd2_0' @click.stop="getNextAll">
          <text class='questionAnswer_fd2_0_c0'>换一批</text>
        </view> -->
        <view class='flex flex-direction flex-wrap align-stretch questionAnswer_fd2_1'>
          <view class='flex flex-wrap align-center justify-end' @click="jump">
            <text class='questionAnswer_fd2_1_c0_c0'>跳过</text>
          </view>
          <view class='flex flex-wrap align-center questionAnswer_fd2_1_c1'>
            <image class='questionAnswer_fd2_1_c1_c0' mode="aspectFill" :src='objItem.avatar'></image>
            <text class='questionAnswer_fd2_1_c1_c1'>{{objItem.nickname}}</text>
            <text class='questionAnswer_fd2_1_c1_c2'>向你提问：</text>
          </view>
          <view class='flex flex-wrap align-center questionAnswer_fd2_1_c2'>
            <text class='questionAnswer_fd2_1_c2_c0'> {{objItem.title}}</text>
          </view>
          <view class="questionAnswer_fd2_1_c2">{{objItem.content}}</view>

          <view class="img-box">
            <image class="imgss" @click.stop="prveims(objItem.images,index)" v-for="(item,index) in objItem.images"
              :src="item" mode="aspectFill"></image>
          </view>
          <view class='flex flex-direction flex-wrap align-stretch questionAnswer_fd2_1_c3'>
            <view class='flex flex-direction flex-wrap align-stretch questionAnswer_fd2_1_c3_c0'>
              <view class='flex flex-direction flex-wrap align-stretch' v-if=" objItem.question_type=='2'">
                <benben-select-diy ref="showSelectPopup1706031461232"
                  class-name='flex flex-direction align-stretch flex' :items.sync="objItem.operation_info"
                  v-model="selec_id" default-type="num" default-label="operation" :allow-cancel='false' type="radio"
                  :disabled='false'>
                  <template v-for='(item,key0) in objItem.operation_info'>
                    <view v-if="item.isSelected"
                      class='flex align-center justify-center flex questionAnswer_fd2_1_c3_c0_c0_c0_c0' :key="key0"
                      @tap="suabmit(item,key0)">
                      <text class='questionAnswer_fd2_1_c3_c0_c0_c0_c0_c0'>{{item.operation}}</text>
                    </view>
                    <view v-else class='flex align-center justify-center flex questionAnswer_fd2_1_c3_c0_c0_c0_c1'
                      :key="key0" @tap="suabmit(item,key0)">
                      <text class='questionAnswer_fd2_1_c3_c0_c0_c0_c1_c0'>{{item.operation}}</text>
                    </view>
                  </template></benben-select-diy>
              </view>
              <view class='flex flex-direction flex-wrap align-stretch' v-if=" objItem.question_type=='3'">
                <benben-select-diy ref="showSelectPopup17060314612322"
                  class-name='flex flex-direction align-stretch flex' :items.sync="objItem.operation_info"
                  v-model="selec_id_all" :label.sync="selec_id_allname" default-type="num" default-label="operation"
                  :allow-cancel='true' type="checkbox" :disabled='false'>
                  <template v-for='(item,key0) in objItem.operation_info'>
                    <view v-if="item.isSelected"
                      class='flex align-center justify-center flex questionAnswer_fd2_1_c3_c0_c0_c0_c0' :key="key0"
                      @tap="$refs.showSelectPopup17060314612322.tapHandle(key0)">
                      <text class='questionAnswer_fd2_1_c3_c0_c0_c0_c0_c0'>{{item.operation}}</text>
                    </view>
                    <view v-else class='flex align-center justify-center flex questionAnswer_fd2_1_c3_c0_c0_c0_c1'
                      :key="key0" @tap="$refs.showSelectPopup17060314612322.tapHandle(key0)">
                      <text class='questionAnswer_fd2_1_c3_c0_c0_c0_c1_c0'>{{item.operation}}</text>
                    </view>
                  </template></benben-select-diy>
              </view>
              <view class="next" @click.stop="nextSubmit" v-if=" objItem.question_type=='3'">下一题</view>
              <view class='flex flex-wrap align-center questionAnswer_fd2_1_c3_c0_c1'
                v-if=" objItem.question_type=='1'">
                <input style="width: 500rpx;" type="text" :placeholder="`请输入`" confirm-type="done" :maxlength="-1"
                  placeholder-style="color:rgba(191, 191, 191, 1);font-size:28rpx" v-model="question"
                  @confirm="submitquestion" />

              </view>
              <!-- <view class="next" v-if=" objItem.question_type=='1'" @click.stop="submitquestion">下一题</view> -->
            </view>
            <!-- <view class='flex flex-wrap align-center justify-center questionAnswer_fd2_1_c3_c1'>
              <image class='questionAnswer_fd2_1_c3_c1_c0' mode="aspectFit" :src='STATIC_URL+"107.png"'></image>
            </view> -->
          </view>
          <view class='flex flex-wrap align-center justify-center questionAnswer_fd2_1_c4' v-if="objItem">
            <button class='questionAnswer_fd2_1_c4_c0' @tap.stop="handleJumpDiy" data-type="navigateTo"
              :data-url="`/pages/wode/choosepeopleFollow/choosepeopleFollow?aid=${objItem.aid}&currentIndex=${currentIndex}`">转发给（可能）知道答案的朋友</button>
          </view>
        </view>
      </view>

      <!---flex布局flex布局结束-->
      <benben-popup v-model="popupShow1706031068218" :mask="true" :mask-close-able="false" mode='center' :z-index='999'>
        <!---flex布局flex布局开始-->
        <view class="flex flex-direction flex-wrap align-center benben-flex-layout questionAnswer_flex_3">
          <image class='questionAnswer_fd3_0' mode="aspectFit" :src='STATIC_URL+"108.png"'></image>
          <text class='questionAnswer_fd3_1'>谢谢你的帮助~</text>
          <!-- <view class='flex flex-wrap align-center questionAnswer_fd3_2'>
            <text class='questionAnswer_fd3_2_c0'>经验+</text>
            <text class='questionAnswer_fd3_2_c0'>200</text>
          </view> -->
          <!-- <view class='flex flex-wrap align-center questionAnswer_fd3_3'>
            <text class='questionAnswer_fd3_3_c0'>补充回答（+</text>
            <text class='questionAnswer_fd3_3_c0'>1</text>
            <text class='questionAnswer_fd3_3_c0'>经验)</text>
          </view> -->
          <view class="back" @tap.stop="handleJumpDiy" data-type="redirectTo"
            :data-url="`/pages/wode/experienceValue/experienceValue`">查看经验</view>
        </view>

        <!---flex布局flex布局结束-->

      </benben-popup>


    </view>
  </view>
</template>
<script>
  export default {
    components: {},


    data() {
      return {
        selec_id_allname: '',
        "popupShow1706031068218": false,
        "state": "1",
        "selsecType": [{
          "name": "Yes",
          "value": "1",
          "image": ""
        }, {
          "name": "No",
          "value": "2",
          "image": ""
        }],
        "selec_id": "",
        dataList: [],
        total: 0,
        objItem: '',
        currentIndex: 0,
        pagesize: '',
        precenum: 0,
        baifenzhi: 0,
        question: '',
        selec_id_all: '',
        is_q: 0,
        overIndec: 0
      };
    },
    computed: {
      themeColor() {
        return this.$store.getters.themeColor
      },

    },
    watch: {},
    onLoad(options) {
      this.pagesize = options.num
      this.is_q = options.is_q
      this.baifenzhi = 100 / this.pagesize
      this.getList()
    },
    onUnload() {

    },
    onReady() {

    },
    onShow() {
      if (uni.getStorageSync('currentIndex')) {
        this.currentIndex = uni.getStorageSync('currentIndex')
        this.jump()
      }
    },
    onHide() {
      this.popupShow1706031068218 = false
    },
    onResize() {

    },
    onPullDownRefresh() {

    },
    onReachBottom(e) {

    },
    onPageScroll(e) {

    },
    methods: {
      prveims(list, index) {
        uni.previewImage({
          urls: list,
          current: index
        })
      },
      jump() {
        // this.currentIndex = parseInt(this.currentIndex) + 1
        if (this.currentIndex < this.total - 1) {
          console.log('this.overIndec0', this.overIndec)
          this.currentIndex = this.currentIndex + 1
          this.objItem = this.dataList[this.currentIndex]
        } else {
          this.$message.info('暂时没有足够问题，请稍后再试')
        }

        // this.objItem = this.dataList[this.currentIndex]
        // console.log('objItemobjItemobjItem', this.objItem, this.currentIndex)
        // uni.setStorageSync('currentIndex', '')
        // this.currentIndex = uni.getStorageSync('currentIndex')
      },
      suabmit(item, key0) {
        this.$refs.showSelectPopup1706031461232.tapHandle(key0)
        this.$api.post(global.apiUrls.post657914e009af0, {
          content: item.operation,
          reply_num: item.num, //单选编号
          is_q: this.is_q,
          pid: 0,
          postquestion_id: this.objItem.aid //问题id
        }).then(res => {
          if (res.data.code == 1) {
            console.log(' suabmit', this.currentIndex, this.pagesize)
            if (this.overIndec == this.pagesize - 1) {
              this.overIndec = this.overIndec + 1
              this.precenum = this.precenum + this.baifenzhi
              this.popupShow1706031068218 = true
              return;
            }

            this.overIndec = this.overIndec + 1
            if (this.currentIndex < this.total - 1) {
              console.log('this.overIndec0', this.overIndec)
              this.currentIndex = this.currentIndex + 1

              this.precenum = this.precenum + this.baifenzhi
              this.objItem = this.dataList[this.currentIndex]
            } else {
              this.$message.info('暂时没有足够问题，请稍后再试')
            }
            console.log(' this.objItem', this.currentIndex, this.dataList[this.currentIndex])
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      // 多选
      nextSubmit() { //多选
        this.$api.post(global.apiUrls.post657914e009af0, {
          content: this.selec_id_allname,
          reply_num: this.selec_id_all, //单选编号
          is_q: this.is_q,
          pid: 0,
          postquestion_id: this.objItem.aid //问题id
        }).then(res => {
          if (res.data.code == 1) {
            console.log(' nextSubmit', this.currentIndex, this.pagesize)
            if (this.overIndec == this.pagesize - 1) {
              this.popupShow1706031068218 = true
              return;
            }
            this.overIndec = this.overIndec + 1
            if (this.currentIndex < this.total - 1) {
              console.log('this.overIndec0', this.overIndec)
              this.currentIndex = this.currentIndex + 1

              this.precenum = this.precenum + this.baifenzhi
              this.objItem = this.dataList[this.currentIndex]
            } else {
              this.$message.info('暂时没有足够问题，请稍后再试')
            }
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      submitquestion() { //回答问题
        if (!this.question) {
          this.$message.info('请回答问题')
          return
        }
        this.$api.post(global.apiUrls.post657914e009af0, {
          content: this.question,
          is_q: this.is_q,
          pid: 0,
          postquestion_id: this.objItem.aid //问题id
        }).then(res => {
          if (res.data.code == 1) {
            this.question = ''
            if (this.overIndec == this.pagesize - 1) {
              this.popupShow1706031068218 = true
              return;
            }

            this.overIndec = this.overIndec + 1
            if (this.currentIndex < this.total - 1) {
              console.log('this.overIndec0', this.overIndec)
              this.currentIndex = this.currentIndex + 1

              this.precenum = this.precenum + this.baifenzhi
              this.objItem = this.dataList[this.currentIndex]
            } else {
              this.$message.info('暂时没有足够问题，请稍后再试')
            }

            console.log(this.dataList, this.currentIndex, this.objItem)
          } else {
            this.$message.info(res.data.msg)
          }
        })
      },
      getNextAll() {
        this.question = ''
        this.precenum = 0
        this.overIndec = 0
        this.objItem = ''
        this.currentIndex = 0
        this.getList()
      },
      getList() {
        this.question = ''
        this.$api.post(global.apiUrls.post657ac0ba22652, {
          // list_rows: this.pagesize,
          list_rows: 20,
          type: this.is_q == 1 ? '2' : '1'
        }).then(res => {
          if (res.data.code == 1) {

            if (res.data.data.data.length == 0) {
              this.$message.info('暂时没有足够问题，请稍后再试')
            } else {
              this.dataList = res.data.data.data
              this.total = res.data.data.total
              this.objItem = this.dataList[this.currentIndex]
            }

          }
        })
      },
    }
  };
</script>
<style lang="scss" scoped>
  .img-box {
    width: 580rpx;
    margin: 0 auto
  }

  .imgss {
    width: 100rpx;
    height: 100rpx;
    margin: 16rpx 16rpx 0 0;
    border-radius: 16rpx;
  }

  .back {
    background: rgba(100, 80, 235, 1);
    border-radius: 33rpx 33rpx 33rpx 33rpx;
    width: 124rpx;
    line-height: 56rpx;
    font-size: 28rpx;
    color: #fff;
    text-align: center;
  }

  .next {
    border: 1px solid #6450eb;
    background: white;
    border-radius: 44rpx;
    width: 240rpx;
    line-height: 60rpx;
    font-size: 28rpx;
    color: #6450eb;
    text-align: center;
    margin: 40rpx auto 0 auto;
  }

  .page {
    width: 100vw;
    overflow-x: hidden;
    min-height: calc(100vh - var(--window-bottom));
    background: url(image-path('106.png')) no-repeat;
    background-size: 100% auto;
  }

  .questionAnswer_flex_0 {
    background: url(image-path('106.png')) no-repeat;
    width: 750rpx;
    height: 88rpx;
    overflow: hidden;
    z-index: 10;
    top: 0rpx;
    background-size: 100% auto !important;
  }

  .questionAnswer_fd0_0_c1_c0 {
    font-size: 36rpx;
    font-weight: 700;
    color: #333333;
    line-height: 50rpx;
  }

  .questionAnswer_fd0_0_c0_c0 {
    font-size: 36rpx;
    color: #333;
  }

  .questionAnswer_fd0_0_c0 {
    width: 120rpx;
  }

  .questionAnswer_fd0_0 {
    padding: 0rpx 32rpx 0rpx 32rpx;
  }

  .questionAnswer_flex_1 {
    margin: 53rpx 0rpx 0rpx 0rpx;
  }

  .questionAnswer_progress1_fd1_1_c0 {
    background: rgba(100, 80, 235, 1);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
  }

  .questionAnswer_fd1_1_c0 {
    background: rgba(248, 248, 248, 1);
    width: 634rpx;
    height: 20rpx;
    border-radius: 16rpx 16rpx 16rpx 16rpx;
    background-size: 100% auto;
  }

  .questionAnswer_fd1_1 {
    margin: 24rpx 0rpx 0rpx 0rpx;
  }

  .questionAnswer_fd1_0_c1 {
    color: rgba(100, 80, 235, 1);
    font-size: 28rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .questionAnswer_fd1_0_c0 {
    color: #333333;
    font-size: 28rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .questionAnswer_flex_2 {
    margin: 48rpx 0rpx 0rpx 0rpx;
  }

  .questionAnswer_fd2_1_c4_c0 {
    border: 1px solid rgba(100, 80, 235, 1);
    background: rgba(255, 255, 255, 1);
    border-radius: 50rpx;
    width: 562rpx;
    line-height: 88rpx;
    font-size: 28rpx;
    color: rgba(100, 80, 235, 1);
  }

  .questionAnswer_fd2_1_c4 {
    margin: 48rpx 0rpx 64rpx 0rpx;
  }

  .questionAnswer_fd2_1_c3_c1_c0 {
    width: 515rpx;
    height: 30rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }

  .questionAnswer_fd2_1_c3_c1 {
    margin: 56rpx 0rpx 0rpx 0rpx;
  }

  .questionAnswer_fd2_1_c3_c0_c1 {
    border: 1px solid rgba(100, 80, 235, 1);
    padding: 38rpx 40rpx 38rpx 40rpx;
    border-radius: 32rpx;
  }

  .questionAnswer_fd2_1_c3_c0_c0_c0_c1_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .questionAnswer_fd2_1_c3_c0_c0_c0_c1 {
    background: rgba(248, 248, 248, 1);
    padding: 22rpx 0rpx 22rpx 0rpx;
    border-radius: 50rpx;
    background-size: 100% auto;
    margin: 0rpx 0rpx 24rpx 0rpx;
  }

  .questionAnswer_fd2_1_c3_c0_c0_c0_c0_c0 {
    color: var(--benbenFontColor3);
    font-size: 32rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .questionAnswer_fd2_1_c3_c0_c0_c0_c0 {
    background: rgba(100, 80, 235, 1);
    border-radius: 50rpx;
    padding: 21rpx 0rpx 21rpx 0rpx;
    margin: 0rpx 0rpx 24rpx 0rpx;
    background-size: 100% auto;
  }

  .questionAnswer_fd2_1_c3_c0 {
    padding: 0rpx 36rpx 0rpx 36rpx;
  }

  .questionAnswer_fd2_1_c3 {
    margin: 32rpx 0rpx 0rpx 0rpx;
  }

  .questionAnswer_fd2_1_c2_c0 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 42rpx;
  }

  .questionAnswer_fd2_1_c2 {
    margin: 24rpx 36rpx 0rpx 36rpx;
  }

  .questionAnswer_fd2_1_c1_c2 {
    color: #333333;
    font-size: 24rpx;
    font-weight: 700;
    line-height: 32rpx;
  }

  .questionAnswer_fd2_1_c1_c1 {
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    margin: 0rpx 16rpx 0rpx 0rpx;
  }

  .questionAnswer_fd2_1_c1_c0 {
    width: 60rpx;
    height: 60rpx;
    border-radius: 100rpx;
    margin: 0rpx 12rpx 0rpx 0rpx;
  }

  .questionAnswer_fd2_1_c1 {
    margin: 0rpx 36rpx 0rpx 36rpx;
  }

  .questionAnswer_fd2_1_c0_c0 {
    border: 1px solid rgba(191, 191, 191, 1);
    margin: 32rpx 24rpx 0rpx 0rpx;
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    padding: 8rpx 24rpx 8rpx 24rpx;
    border-radius: 50rpx;
  }

  .questionAnswer_fd2_1 {
    background: rgba(255, 255, 255, 1);
    margin: 16rpx 58rpx 0rpx 58rpx;
    box-shadow: 0rpx 3rpx 20rpx 1rpx rgba(47, 30, 168, 0.08);
    border-radius: 20rpx;
    background-size: 100% auto;
  }

  .questionAnswer_fd2_0_c0 {
    border: 1px solid rgba(100, 80, 235, 1);
    color: #6450EB;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 32rpx;
    padding: 7rpx 16rpx 7rpx 16rpx;
    border-radius: 8rpx;
  }

  .questionAnswer_fd2_0 {
    padding: 0rpx 58rpx 0rpx 0rpx;
  }

  .questionAnswer_flex_3 {
    background: rgba(255, 255, 255, 1);
    width: 540rpx;
    border-radius: 16rpx;
    background-size: 100% auto;
    padding: 40rpx 0rpx 40rpx 0rpx;
  }

  .questionAnswer_fd3_3_c0 {
    color: #FFFFFF;
    font-size: 24rpx;
    font-weight: 700;
    line-height: 40rpx;
  }

  .questionAnswer_fd3_3 {
    background: rgba(100, 80, 235, 1);
    padding: 20rpx 79rpx 20rpx 79rpx;
    border-radius: 50rpx;
    background-size: 100% auto;
    margin: 40rpx 0rpx 0rpx 0rpx;
  }

  .questionAnswer_fd3_2_c0 {
    color: #999999;
    font-size: 24rpx;
    font-weight: 400;
    line-height: 52rpx;
  }

  .questionAnswer_fd3_2 {
    margin: 16rpx 0rpx 0rpx 0rpx;
  }

  .questionAnswer_fd3_1 {
    color: #333333;
    font-size: 32rpx;
    font-weight: 700;
    line-height: 52rpx;
    margin: 10rpx 0rpx 0rpx 0rpx;
  }

  .questionAnswer_fd3_0 {
    width: 171rpx;
    height: 171rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
  }
</style>
